<template>
    <el-drawer
        v-model="isShow"
        :title="title"
        :destroy-on-close="true"
        size="50%"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :show-close="false"
    >

        <DepartmentUserSelectTable :depId="policeUnitId"/>

        <template #footer>
            <el-button type="primary" @click="changeShowStatus">提交</el-button>
            <!-- 取消 -->
            <el-button @click="changeShowStatus">关闭</el-button>
        </template>
    </el-drawer>
</template>

<script setup>
import DepartmentUserSelectTable from "@/components/DepartmentUserSelectTable/DepartmentUserSelectTable.vue";
import useUserStore from "@/store/modules/user.js";
import {listDept} from "@/api/system/dept.js";


const useStore = useUserStore()

const isShow = ref(false)
const title = ref('')
// 最大的部门 ID
const unitId = ref('')
// 警务部门 ID
const policeUnitId = ref('')
// 辅警部门 ID
const auxiliaryUnitId = ref('')

// 变更显示状态
const changeShowStatus = () => {
    isShow.value = !isShow.value
}

const showSelect = async (name) => {
    changeShowStatus()
    title.value = name;
    unitId.value = useStore.info.unitId;
    const department = await listDept()
    // console.log(useStore.info.unitId)
    console.log(department)
    policeUnitId.value = formatDepartmentId(department, '法警部');
}

const formatDepartmentId = (data, depName) => {
    return data.data.filter(item => item.parentId === unitId.value && !item.isUnit && item.deptName === depName)?.[0].deptId
}

defineExpose({showSelect})


</script>

<style scoped lang="scss">

</style>